<template>
	<view class="fillRepairs">
		<view class="house">
			<view class="title">
				报修房屋
			</view>
			<view class="houseMessage">
				<u-cell :title="formShow.house" :isLink="true" arrow-direction @click="showHouse = true"></u-cell>
				<u-action-sheet :actions="listHouse" @select="selectClickHouse" :title="title" cancelText="取消"
					:show="showHouse" @close="closeHouse" round="5"></u-action-sheet>
			</view>
		</view>
		<view class="repairsMessage">
			<view class="title">
				报修房屋
			</view>
			<view class="conent">
				<u--form labelPosition="left" ref="form1" labelWidth="104">
					<u-form-item label="维修项目" borderBottom @click="showProject = true" ref="item1">
						<u--input disabled disabledColor="#ffffff" :placeholder="formShow.repairItem" border="none"
							placeholder-style="font-size:28rpx"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
						<u-action-sheet :actions="listProject" @select="selectClickProject" :title="titleProject"
							cancelText="取消" :show="showProject" @close="closeHouse" round="5">
						</u-action-sheet>
					</u-form-item>
					<u-form-item label="手机号码" borderBottom ref="item1">
						<u--input disabledColor="#ffffff" placeholder="请输入联系电话号码" border="none"
							placeholder-style="font-size:28rpx" v-model="formObj.mobile"></u--input>
					</u-form-item>
					<u-form-item label="预约日期" borderBottom @click="showTime = true" ref="item1">
						<u--input disabled disabledColor="#ffffff" :placeholder="formObj.appointment" border="none"
							placeholder-style="font-size:28rpx"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
						<u-datetime-picker ref="datetimePicker" :show="showTime" v-model="value1" mode="date"
							:formatter="formatter" @confirm="confirmTime" @cancel="cancel">
						</u-datetime-picker>
					</u-form-item>
				</u--form>
			</view>
		</view>
		<view class="problem">
			<view class="problem-top">
				<view class="title">
					问题描述
				</view>
				<view class="describe">
					<textarea name="" id="" cols="30" rows="10" placeholder="请填写详细报修内容，有助于工作人员快速帮您解决问题。"
						v-model="formObj.description"></textarea>
				</view>
			</view>
			<view class="problem-bottom">
				<view class="title">
					问题附件
				</view>
				<view class="upload">
					<!-- <u-upload :fileList="formObj.attachment" @afterRead="afterRead" @delete="deletePic" name="3"
						multiple :maxCount="10" :previewFullImage="true"></u-upload> -->

					<u-upload :fileList="fileList3" @afterRead="afterRead" @delete="deletePic" name="3" multiple
						:maxCount="10" :previewFullImage="true"></u-upload>
				</view>
			</view>
		</view>
		<life-button icon="/static/icon/repair.png" @click="submitRepairs">提交报修</life-button>
		<view class="box">

		</view>
	</view>
</template>

<script>
	import {
		getRepairsHouse,
		getrepairItem,
		addRepair
	} from '../../api/repairs.js'
	export default {
		data() {
			return {
				formShow: {
					house: '请选择',
					repairItem: '请选择'
				},
				formObj: {
					id: String(new Date().getTime()),
					houseId: '请选择',
					repairItemId: '请选择',
					mobile: '189000000012',
					appointment: '请选择维修时间',
					description: '',
					attachment: [{
						id: '1',
						url: ''
						// url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
					}],
				},
				title: '选择报修房屋',
				listHouse: [{
						name: '北京西三旗花园1号楼 101',
						id: '1'
					},
					{
						name: '北京西三旗花园1号楼 201',
						id: '2'
					}
				],

				titleProject: '选择维修项目',
				listProject: [{
						name: '水路卫浴'
					},
					{
						name: '电路灯具'
					}
				],

				showHouse: false,
				showProject: false,
				showTime: false,
				value1: Number(new Date()),
				fileList3: [{
					url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
				}],
			};
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		onLoad() {
			this.getRepairsHouse()
			this.getrepairItem()
		},
		methods: {
			//关闭房屋选择
			closeHouse() {
				this.showHouse = false
				this.showProject = false

			},
			//确定时间
			confirmTime(e) {
				this.showTime = false
				// console.log(e)
				this.formObj.appointment = this.timestampToTime(e.value)
				// console.log(this.timestampToTime(e.value))

			},
			//取消时间
			cancel() {
				this.showTime = false
			},
			//时间格式化
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			//获取能报修的房子
			async getRepairsHouse() {
				const res = await getRepairsHouse()

				if (res.data.length) {
					// console.log(res.data)
					this.listHouse = res.data
					// console.log(this.listHouse)
				}
			},
			//获取维修项目
			async getrepairItem() {
				const res = await getrepairItem()
				this.listProject = res.data
			},
			//选择报修房子
			selectClickHouse(index) {
				console.log(index)
				this.formObj.houseId = index.id
				this.formShow.house = index.name
			},
			//选择报修类型
			selectClickProject(index) {
				// console.log(index)
				this.formObj.repairItemId = index.id
				this.formShow.repairItem = index.name
			},

			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
				this.formObj.attachment = this.fileList3
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},

			async submitRepairs() {
				try {
					const res = await addRepair(this.formObj)
					console.log('提交')
					uni.showToast({
						title: '提交成功'
					})
					setTimeout(function() {
						uni.navigateBack({
							delta: 1
						})
					}, 500)

				} catch (e) {
					//TODO handle the exception
				}

			},
			//时间戳转时间
			timestampToTime(timestamp) {
				timestamp = timestamp ? timestamp : null;
				let date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let Y = date.getFullYear() + '-';
				let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + '';
				// let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				// let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				// let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
				return Y + M + D;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fillRepairs {
		width: 100%;
		height: 100%;
		background: #fafafa;

		.house {
			.title {
				height: 86rpx;
				color: #979797;
				font-size: 24rpx;
				box-sizing: border-box;
				padding: 30rpx 30rpx 20rpx 30rpx;
			}

			.houseMessage {
				::v-deep .u-cell__body {
					height: 102rpx;
					background: #fff;

					.u-cell__title-text {
						color: #333333 !important;
						font-size: 28rpx !important;
					}
				}

			}
		}

		.repairsMessage {
			.title {
				height: 86rpx;
				color: #979797;
				font-size: 24rpx;
				box-sizing: border-box;
				padding: 30rpx 30rpx 20rpx 30rpx;
			}

			.conent {
				height: 306rpx;
				background: #fff;
				padding: 0 30rpx;

				::v-deep.u-form-item {
					height: 102rpx;

					.u-form-item__body {
						height: 62rpx;
					}

					.u-form-item__body__left__content__label {
						color: #333333 !important;
						font-size: 28rpx !important;
						line-height: 42rpx;
					}
				}


			}
		}

		.problem {
			height: 482rpx;
			width: 100%;
			background: #fff;
			padding: 30rpx;
			box-sizing: border-box;

			.problem-top {
				border-bottom: 2rpx solid #f9f9fb;

				.title {
					color: #333333;
					font-size: 28rpx;
					line-height: 42rpx;
					margin-bottom: 20rpx;
				}

				.describe {
					color: #C3C3C5;
					font-size: 28rpx;
					line-height: 42rpx;
					// margin-bottom: 30rpx;
					width: 690rpx;
					height: 84rpx;


					textarea {
						width: 100%;
						height: 100%;
						background: #fff;
					}

				}
			}
		}

		.problem-bottom {
			width: 750px;
			height: 276.5rpx;
			background: #fff;
			box-sizing: border-box;

			.title {
				color: #333333;
				font-size: 28rpx;
				line-height: 42rpx;
				padding-top: 30rpx;

			}

			.upload {
				margin-top: 20rpx;
			}
		}

		.box {
			width: 100%;
			height: 200rpx;
		}
	}
</style>
